<template>
	<el-main height="">
		<el-form :model="searchParm" ref="form" :inline="true" size="default">
			<el-form-item>
				<el-input placeholder="请输入标题" v-model="searchParm.title"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" @click="searchBtn">搜索</el-button>
				<el-button type="danger" @click="resetBtn" plain icon="Close">重置</el-button>
				<el-button icon="Plus" type="primary" @click="addBtn">新增</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格数据 -->
		<el-table :height="tableHeight" :data="tableList" border stripe>
			<el-table-column prop="title" label="标题"></el-table-column>
			<el-table-column prop="images" label="图片">
				<template #default="scope">
					<el-image v-if="scope.row.images" style="width: 100px; height: 60px"
						:src="scope.row.images.split(',')[0]" />
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template #default="scope">
					<el-switch v-model="scope.row.status" :active-value="'0'" :inactive-value="'1'"
						:before-change="beforeStatus" @change="changeStatus(scope.row.status, scope.row.banId)" />
				</template>
			</el-table-column>
			<el-table-column prop="orderNum" label="序号"></el-table-column>
			<el-table-column label="操作" align="center" width="220">
				<template #default="scope">
					<el-button @click="editBtn(scope.row)" icon="Edit" type="primary" size="default">编辑</el-button>
					<el-button @click="deleteBtn(scope.row)" icon="Delete" type="danger" size="default">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination @size-change="sizeChange" @current-change="currentChange"
			:current-page.sync="searchParm.currentPage" :page-sizes="[10, 20, 40, 80, 100]"
			:page-size="searchParm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="searchParm.total"
			background>
		</el-pagination>
		<!-- 弹框 -->
		<SysDialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
			@onClose="onClose" @onConfirm="commit">
			<template v-slot:content>
				<el-form :model="addModel" ref="addRef" :rules="rules" label-width="80px" :inline="false"
					size="default">
					<el-form-item prop="title" label="标题">
						<el-input v-model="addModel.title"></el-input>
					</el-form-item>
					<el-form-item prop="goodsId" label="商品">
						<el-select v-model="addModel.goodsId" class="m-2" placeholder="请选择商品" size="default"
							style="width: 100%">
							<el-option v-for="item in selectList" :key="item['value']" :label="item['label']"
								:value="item['value']" />
						</el-select>
					</el-form-item>
					<el-form-item prop="images" label="图片">
						<UploadImage ref="upImgRef" @getImg="getImg" :oldUrl="oldUrl" :fileList="fileList">
						</UploadImage>
					</el-form-item>
					<el-form-item prop="orderNum" label="序号">
						<el-input v-model="addModel.orderNum"></el-input>
					</el-form-item>
					<el-form-item prop="status" label="状态:">
						<el-radio-group v-model="addModel.status">
							<el-radio :label="'0'">启用</el-radio>
							<el-radio :label="'1'">停用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</template>
		</SysDialog>
	</el-main>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from "vue";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import UploadImage from "@/components/UploadImage.vue";
import { NewType } from "@/type/BaseType";
import {
	ElMessage,
	type FormInstance,
	type UploadUserFile,
} from "element-plus";
import {
	getGoodsListApi,
	addCategoryApi,
	getListApi,
	upandownApi,
	editApi,
	deleteApi,
} from "@/api/banner/index";
import useInstance from "@/hooks/useInstance";
import { Banner } from "@/api/banner/BannerModel";
import { EditType } from "@/type/BaseEnum";
const { global } = useInstance();
//表单ref属性
const addRef = ref<FormInstance>();
//图片上传的ref属性
const upImgRef = ref();
//图片初始值
const fileList = ref<Array<UploadUserFile>>([]);
//回显的图片
const oldUrl = ref<Array<{ url: string }>>([]);
//图片地址
const imgUrl = ref<Array<{ url: string }>>([]);
//获取弹框属性
const { dialog, onClose, onShow } = useDialog();
//搜索参数
const searchParm = reactive({
	title: "",
	currentPage: 1,
	pageSize: 10,
	total: 0,
});
//表单绑定的对象
const addModel = reactive({
	banId: "",
	goodsId: "",
	title: "",
	images: "",
	status: "",
	orderNum: "",
});
//表单验证规则
const rules = reactive({
	title: [
		{
			required: true,
			trigger: "change",
			message: "请填写标题",
		},
	],
	goodsId: [
		{
			required: true,
			trigger: "change",
			message: "请选择商品",
		},
	],
	images: [
		{
			required: true,
			trigger: "change",
			message: "请上传图片",
		},
	],
	status: [
		{
			required: true,
			trigger: "change",
			message: "请选择状态",
		},
	],
	orderNum: [
		{
			required: true,
			trigger: "change",
			message: "请填写序号",
		},
	],
});
//接收图片上传地址
const getImg = (img: NewType) => {
	console.log("999");
	console.log(img);
	imgUrl.value = oldUrl.value.concat(img.newImgUrl);
	if (img.deleteUrl.length > 0) {
		let newArr = imgUrl.value.filter(
			(x) => !img.deleteUrl.some((item) => x.url === item.url)
		);
		imgUrl.value = newArr;
	}
	// console.log(imgUrl.value)
	//把图片路径拼接为逗号分隔的字符串
	let url = "";
	for (let k = 0; k < imgUrl.value.length; k++) {
		url = url + imgUrl.value[k].url + ",";
	}
	addModel.images = url.substring(0, url.lastIndexOf(","));
	console.log(addModel.images);
};
//定义商品数据
const selectList = ref([]);
//获取下拉商品列表
const getGoodsList = async () => {
	let res = await getGoodsListApi();
	if (res && res.code == 200) {
		selectList.value = res.data;
	}
};
//表格数据
const tableList = ref([]);
//获取列表
const getList = async () => {
	let res = await getListApi(searchParm);
	if (res && res.code == 200) {
		tableList.value = res.data.rows;
		searchParm.total = res.data.total;
	}
};
//上架下架操作之前的事件
const beforeStatus = async () => {
	let confirm = await global.$myconfirm("确定上下架吗？");
	return new Promise((resolve, reject) => {
		if (confirm) {
			return resolve(confirm);
		} else {
			return reject(confirm);
		}
	});
};
//上下架操作
const changeStatus = async (type: string, banId: string) => {
	console.log(type);
	console.log(banId);
	let res = await upandownApi({
		banId: banId,
		status: type
	});
	if (res && res.code == 200) {
		getGoodsList();
	}
};
//页容量改变时触发
const sizeChange = (size: number) => {
	searchParm.pageSize = size;
	getList();
};
//页数改变时触发
const currentChange = (page: number) => {
	searchParm.currentPage = page;
	getList();
};
//重置
const resetBtn = () => {
	searchParm.title = "";
	getList();
};
//搜索
const searchBtn = () => {
	getList();
};
//表格高度
const tableHeight = ref(0);
//表示
const tags = ref("");
//新增
const addBtn = () => {
	//清空图片数据
	imgUrl.value = [];
	oldUrl.value = [];
	fileList.value = [];
	dialog.width = 700;
	dialog.height = 400;
	tags.value = "0";
	dialog.width = 700;
	dialog.height = 400;
	// 获取商品数据
	getGoodsList();
	onShow();
};
//编辑
const editBtn = (row: Banner) => {
	tags.value = "1";
	//清空图片数据
	imgUrl.value = [];
	oldUrl.value = [];
	fileList.value = [];
	dialog.width = 700;
	dialog.height = 400;
	// 获取商品数据
	getGoodsList();
	console.log(row);
	onShow();
	// 数据回显
	nextTick(() => {
		Object.assign(addModel, row);
		//图片回显
		if (addModel.images) {
			//逗号分隔转数组
			let imgs = addModel.images.split(",");
			for (let i = 0; i < imgs.length; i++) {
				let img = { name: "", url: "" };
				img.name = imgs[i];
				img.url = imgs[i];
				fileList.value.push(img);
				oldUrl.value.push({ url: imgs[i] });
			}
		}
	});
	//清空表单
	addRef.value?.resetFields();
};
//删除
const deleteBtn = async (row: Banner) => {
	console.log(row);
	let confirm = await global.$myconfirm("确实删除该数据吗?");
	if (confirm) {
		let res = await deleteApi(row);
		if (res && res.code == 200) {
			ElMessage.success(res.msg);
			getList();
		}
	}
};
//表单提交
const commit = () => {
	addRef.value?.validate(async (valid) => {
		if (valid) {
			let res = null;
			if (tags.value == EditType.ADD) {
				res = await addCategoryApi(addModel);
			} else {
				res = await editApi(addModel);
			}
			if (res && res.code == 200) {
				ElMessage.success(res.msg);
				//清空图片
				upImgRef.value.clearimg();
				getList();
				onClose();
			}
		}
	});
};
onMounted(() => {
	getList();
	nextTick(() => {
		tableHeight.value = window.innerHeight - 220;
	});
});
</script>
<style scoped></style>